<gm:page title="What people are doing?" authenticate="true" gadget="true" css="http://gallery.googlemashups.com/resources/gallery.css">

   <div style="margin-top:2em;">
   <div id="galleryForm">
       <h1>Submit your Application</h1>
       <p>Congrats on creating an application with the OpenSocial programming model! Use this form to submit it to our gallery.</p>
       <div id="form">
       <gm:item create="true" data="${app}/galleryApps" template="galleryFormTemplate">
         <gm:handleEvent event="save" execute="window.location='http://opensocialgallery.googlemashups.com'" />
       </gm:item>
       </div>
       <div id="message" style="display:none;padding:5px;background:#E8EEF7;border:1px solid #C3D9FF;text-align:center;">
        <a href="http://opensocialgallery.googlemashups.com">Go back to the gallery</a> or <a href="javascript:hideShow('message','form');">add a project.</a>
       </div>
  </div> 
  </div>
  
  <gm:template id="galleryFormTemplate">
    <div repeat="true">
      <table width="650">
        <tr>
          <td width="250" valign="top" class="rowPadding">Application Title:</td>
          <td valign="top" class="rowPadding"><gm:text ref="atom:title" size="50"/> </td>
        </tr>
        <tr>
           <td width="250" valign="top" class="rowPadding">Application description:</td>
           <td valign="top" class="rowPadding"><gm:textarea ref="atom:content"/> </td>
        </tr>
        <tr>
           <td width="250" valign="top" class="rowPadding">Application URL:</td>
           <td valign="top" class="rowPadding"><gm:text ref="gd:appLink" size="50"/> </td>
        </tr>
        <tr>
          <td width="250" valign="top" class="rowPadding">Screenshot URL:</td>
          <td valign="top" class="rowPadding"><gm:text ref="gd:imgURL" size="50"/> </td> 
        </tr>
        <tr>
          <td width="250" valign="top" class="rowPadding">Author:</td>
          <td valign="top" class="rowPadding"><gm:text ref="gmd:author" size="50"/> </td> 
        </tr>
        <tr>
            <td width="250" valign="top" class="rowPadding"><gm:editButtons text="true"/></td>
            <td valign="top" class="rowPadding"></td>
        </tr>
       </table>
       <div><gm:date ref="gd:when/@startTime" style="display:none"/></div>
      </div>
  </gm:template>
  
  <script>
     function hideShow(div1,div2) {
       var hide = document.getElementById(div1);
       var show = document.getElementById(div2);
    
       hide.style.display = "none";
       show.style.display = "block";
     }
    
  </script>

</gm:page>